import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaForm, WeaSwitch, WeaTableNew } from 'comsMobx';
import { toJS } from 'mobx';
import { Synergy } from '../components/Portal/Portal';
import {
  WeaTop,
  WeaLeftTree,
  WeaLeftRightLayout,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaOrgTree,
  WeaPopoverHrm,
} from 'ecCom';
import MonitorContent from './monitor/MonitorContent';

@inject('docMonitorStore')

@observer
class Monitor extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { docMonitorStore } = this.props;
    const {
      getConditionInfo, doSearch, getRightMenu
      , getOperateType, getSeparatRight,
    } = docMonitorStore;
    doSearch();
    getSeparatRight();
    getConditionInfo('Monitor');
    getRightMenu('Monitor');
    getOperateType();
  }

  componentWillReceiveProps(nextProps) {
    const { docMonitorStore } = nextProps;
    const {
      getConditionInfo, doSearch, getRightMenu
      , getOperateType, getSeparatRight, clearSelectedTreeKeys,
    } = docMonitorStore;
      docMonitorStore.selectedTreeKeys = [];
	docMonitorStore.secCategory="";
    doSearch();
    getSeparatRight();
    getConditionInfo('Monitor');
    getRightMenu('Monitor');
    getOperateType();
  }

  shouldComponentUpdate() {
    return true;
  }

  componentWillUnmount() {
    const { docMonitorStore } = this.props;
    const {
      setSelectedTreeKeys, setTabData
      , setExpandedKey, setShowSearchAd
      , comsWeaTableStore, clearSelectedTreeKeys } = docMonitorStore;
	  docMonitorStore.selectedTreeKeys = [];
    clearSelectedTreeKeys();
    setTabData([]);
    setExpandedKey([]);
    setShowSearchAd(false);
    comsWeaTableStore.current = 1;
  }

  getRightMenu() {
    const { docMonitorStore } = this.props;
    const {
      rightMenu, comsWeaTableStore, doSearch
      , secCategory, quickSearchValue
      , showSearchAd, doOperate, showBtnKey, setShowSearchAd,
    } = docMonitorStore;
    let Arr = [];
    const selectedRowKeys = comsWeaTableStore.selectedRowKeys;
    rightMenu.slice().forEach((m) => {
      let disabled = selectedRowKeys.length === 0;
      let onClick = () => {
      };
      let content = m.menuName;
      if (m.type === 'BTN_SEARCH') {
        disabled = false;
        onClick = () => {
          if (showSearchAd) {
            doSearch({ secCategory, operation: showBtnKey, ...docMonitorStore.form.getFormParams() });
            setShowSearchAd(false);
          } else {
            doSearch({ secCategory, operation: showBtnKey, docsubject: quickSearchValue });
          }
        };
      } else if (m.type === 'BTN_EXECUTE') {
        onClick = () => {
          doOperate({ operation: showBtnKey, ids: selectedRowKeys.join() });
        };
      } else if (m.type === 'BTN_COLUMN') {
        disabled = false;
        onClick = () => {
          comsWeaTableStore.setColSetVisible(true);
          comsWeaTableStore.tableColSet(true);
        };
      } else if (m.type === 'BTN_STORE') {
        disabled = true;
      } else if (m.type === 'BTN_HELP') {
        disabled = true;
      } else if (m.type === 'BTN_MINIATURE_DISPLAY') {
        disabled = true;
      }
      const bool = m.type !== 'BTN_STORE' && m.type !== 'BTN_HELP';
      bool && Arr.push({
        key: m.type,
        icon: <i className={m.menuIcon} />,
        content,
        disabled,
        onClick,
      });
    });
    return Arr;
  }

  onRightMenuClick(key) {
    let Arr = [];
    return Arr;
  }

  getButtons() {
    let Arr = [];
    return Arr;
  }

  getTree() {
    const { docMonitorStore } = this.props;
    const {
      treeDatas, selectedTreeKeys, expandedKey } = docMonitorStore;
    return (
      <WeaLeftTree ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftTree@81t19j`}
        datas={toJS(treeDatas)}
        expandedKeys={expandedKey.slice()}
        selectedKeys={selectedTreeKeys.slice()}
        defaultExpandLevel={1}
        onExpand={this.onTreeExpand}
        onSelect={this.onTreeSelect}
      />
    );
  }
  onTreeExpand= expandedKey => {
    const { docMonitorStore } = this.props;
    const { setExpandedKey } = docMonitorStore;
    setExpandedKey(expandedKey)
  }
  onTreeSelect=(key) => {
    const { docMonitorStore } = this.props;
    const { setSelectedTreeKeys, comsWeaTableStore } = docMonitorStore;
    setSelectedTreeKeys(key);
    comsWeaTableStore.current = 1;
  }

  getOrgTree() {
    return (
      <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@5rqu8s`}
        isLoadSubDepartment={false}
        needSearch={true}
        params={this.getOrgTreeParams()}
        treeNodeClick={this.onOrgTreeNodeClick}
      />
    );
  }
  getOrgTreeParams=()=>{
    const { docMonitorStore } = this.props;
    const { rightStr} = docMonitorStore;
    return { rightStr }
  }
  onOrgTreeNodeClick=(nodeObj) => {
    const { docMonitorStore } = this.props;
    const { getTreeDatas, setSubCompanyId, rightStr, clearSelectedTreeKeys,} = docMonitorStore;
    getTreeDatas('Monitor', { rightStr, subCompanyId: nodeObj.node.props.id });
    setSubCompanyId(nodeObj.node.props.id);
    clearSelectedTreeKeys();
    docMonitorStore.selectedTreeKeys = [];
  }
  getCollectParams=()=>{
    const { docMonitorStore } = this.props;
    return {
      favname: docMonitorStore.title,
      favouritetype: 2,
      objid: 0,
      importantlevel: 1,
      link: 'wui/index.html#/main/document/monitor',
    }
  }
  getDropMenuProps=()=>{
    const { docMonitorStore } = this.props;
    return {
      collectParams: {
        favname: docMonitorStore.title,
        favouritetype: 2,
        objid: 0,
        importantlevel: 1,
        link: 'wui/index.html#/main/document/monitor',
      },
    }
  }
  render() {
    const { docMonitorStore } = this.props;
    const { hasRight } = docMonitorStore;
    return (
      <div className="wea-doc-monitor">
        {
          location.pathname === '/spa/document/index_mobx.html' && (<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@5appjq`} />)
        }
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@tc8qaw`}
          datas={this.getRightMenu()}
          collectParams={this.getCollectParams()}
          onClick={this.onRightMenuClick}
        >
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@0p5bza`}
            title={docMonitorStore.title}
            loading={docMonitorStore.loading}
            icon={<i className="icon-coms-doc" />}
            iconBgcolor="#df583a"
            buttons={this.getButtons()}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenu()}
            dropMenuProps={this.getDropMenuProps()}
            onDropMenuClick={this.onRightMenuClick}
          >
            {
              docMonitorStore.hasRight ? (
                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@y57s86`}
                  isNew={true}
                  col={3}
                  leftCom={this.getOrgTree()}
                  midCom={this.getTree()}
                >
                  <MonitorContent ecId={`${this && this.props && this.props.ecId || ''}_MonitorContent@fvzjdy`} />
                </WeaLeftRightLayout>
              ) : (
                  <MonitorContent ecId={`${this && this.props && this.props.ecId || ''}_MonitorContent@pzx97s`} />
                )
            }

          </WeaTop>
        </WeaRightMenu>
         <Synergy ecId={`${this && this.props && this.props.ecId || ''}_Synergy@xaumq7`} pathname="/document/monitor" secid="-1" docid="-1" />
      </div>
    );
  }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@8qzf0h`} msg={props.error ? props.error : getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' },
)(Monitor);

